import React, { lazy } from "react";

// 重定向组件
import { Navigate } from "react-router-dom";
import Home from "../views/Home"



const About = lazy(() => import("../views/About"))
const User = lazy(() => import("../views/User"))
const Page1 = lazy(() => import("../views/Page1"))
const Page2 = lazy(() => import("../views/Page2"))

// 懒加载的模式组建的写法, 外面需要套一层<React.Suspense />


const withLoadingComponent = (comp:JSX.Element) => (
    <React.Suspense fallback={<div>Loading...</div>}>
        { comp }
    </React.Suspense>
)


const routes = [
    {
        path: '/',
        element: <Navigate to={"/page1"}/>
    },
    {
        path: '/',
        element: <Home />,
        children: [
            {
                path: '/page1',
                element: withLoadingComponent(<Page1 />)
            },
            {
                path: '/page2',
                element: withLoadingComponent(<Page2 />)
            }
        ]
    },
    {
        path: '/home',
        element: <Home />
    },
    {
        path: '/about',
        element: withLoadingComponent(<About />)
    },
    {
        path: '/user',
        element: withLoadingComponent(<User />)
    }
]

export default routes